<template>
    <h1>toRef & toRefs</h1>
    <h2>{{ obj }}</h2>
    <button @click="fn">点击修改name</button>

    <!-- <h3>{{ newObj }}</h3> -->
    <h3>{{ name }}</h3>
    <h3>{{ age }}</h3> 

</template>

<script setup lang='ts'>
import { reactive,ref, toRef, toRefs } from 'vue';

let obj=reactive({
    name:"小米",
    age:18,
    height:180
});

function fn(){
    obj.name="李四";
    obj.age=99;
}
// 基本数据类型不具备响应式
// let userName=obj.name;

// 结构响应式数据 和原数据有响应式链
// let userName=toRef(obj,"name");

// let newObj=toRefs(obj);
// console.log(newObj);

// 对象解构写法
let {name,age}=toRefs(obj);

</script>



<style scoped>

</style>
